<!--
* @author: XJC
* @date: 2024-03-15 11:20
* @description：index
* @update: 2024-03-15 11:20
-->
<template>
  <div class='container'>
    <div class='app-container'>
      <div class='a-box'>
        <el-tabs>
          <el-tab-pane label='配置管理'>
            <el-form v-loading='formLoading' element-loading-text="拼命加载中..." :model='form' ref='ruleForm' :rules='rules' label-width='160px'>
              <el-form-item label='称重器心跳间隔' prop='heartBeat'>
                <el-input placeholder='称重器心跳间隔(秒)' v-model='form.heartBeat'>
                  <template slot='append'>秒</template>
                </el-input>
              </el-form-item>
              <el-form-item label='门禁IP'>
                <el-input placeholder='门禁IP' v-model='form.hcnetIp'>
                </el-input>
              </el-form-item>
              <el-form-item label='门禁登录名'>
                <el-input placeholder='门禁登录名' v-model='form.hcnetUser'>
                </el-input>
              </el-form-item>
              <el-form-item label='门禁密码'>
                <el-input placeholder='门禁密码' v-model='form.hcnetPwd'>
                </el-input>
              </el-form-item>
              <el-form-item label='文件路径'>
                <el-input placeholder='文件路径' v-model='form.filePath'>
                </el-input>
              </el-form-item>
              <el-form-item label='重量监听间隔时间' prop='inoutTime'>
                <el-input placeholder='重量监听间隔时间(毫秒)' v-model='form.inoutTime'>
                  <template slot='append'>毫秒</template>
                </el-input>
              </el-form-item>
              <el-form-item label='指令发送间隔时间' prop='instructTime'>
                <el-input placeholder='指令发送间隔时间(毫秒)' v-model='form.instructTime'>
                  <template slot='append'>毫秒</template>
                </el-input>
              </el-form-item>
              <el-form-item label='清理截止日期'>
                <el-date-picker
                  v-model="form.date"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type='primary' :loading='loading' @click='onSubmit("ruleForm")'>保存</el-button>
                <el-button type='primary' :loading='loading' @click='removeInout'>清理出入库记录</el-button>
                <el-button type='primary' :loading='loading' @click='removeTask'>清理历史任务</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
<!--          <el-tab-pane label='其他'></el-tab-pane>-->
        </el-tabs>
      </div>

    </div>
  </div>
</template>
<script>
import { queryOne, update, removeInout, removeTask } from '@/api/systemManage'

export default {
  data() {
    return {
      form: {
        // 称重器心跳间隔
        heartBeat: '60',
        // 门禁IP
        hcnetIp: '',
        // 门禁登录名
        hcnetUser: '',
        // 门禁密码
        hcnetPwd: '',
        // 文件路径
        filePath: '',
        // 重量监听间隔时间
        inoutTime: '',
        // 指令发送间隔时间
        instructTime: ''
      },
      rules: {
        heartBeat: [
          { required: true, message: '请输入称重器心跳间隔', trigger: 'blur' },
          // 限制只能输入数字
          { pattern: /^[0-9]*$/, message: '请输入数字' }
        ],
        hcnetIp: [
          { required: true, message: '请输入门禁IP', trigger: 'blur' },
          // 验证IP格式
          {
            pattern: /^((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$/,
            message: '请输入正确的IP格式'
          }
        ],
        hcnetUser: [
          { required: true, message: '请输入门禁登录名', trigger: 'blur' }
        ],
        hcnetPwd: [
          { required: true, message: '请输入门禁密码', trigger: 'blur' }
        ],
        filePath: [
          { required: true, message: '请输入文件路径', trigger: 'blur' }
        ],
        inoutTime: [
          { required: true, message: '请输入重量监听间隔时间', trigger: 'blur' },
          // 限制只能输入数字
          { pattern: /^[0-9]*$/, message: '请输入数字' }
        ],
        instructTime: [
          { required: true, message: '请输入指令发送间隔时间', trigger: 'blur' },
          // 限制只能输入数字
          { pattern: /^[0-9]*$/, message: '请输入数字' }
        ]
      },
      loading: false,
      formLoading: false
    }
  },
  mounted() {
    this.getConfig()
  },
  methods: {
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          update(this.form).then(res => {
            this.loading = false;
            this.getConfig();
            this.$message({
              message: '保存成功',
              type: 'success'
            })
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    getConfig() {
      this.formLoading = true
      queryOne().then(res => {
        this.formLoading = false
        this.form = res.result
      }).catch(() => {
        this.formLoading = false
      })
    },
    formattedDate(dateString) {
      // 创建一个Date对象
      const date = new Date(dateString);

      // 获取年、月、日
      const year = date.getFullYear();
      const month = ('0' + (date.getMonth() + 1)).slice(-2); // 月份是从0开始的，需要加1并补零
      const day = ('0' + date.getDate()).slice(-2); // 获取日，并补零

      // 拼接成YYYY-MM-DD格式的日期字符串
      return `${year}-${month}-${day}` + " 23:59:59";
    },
    removeInout() {
      if (!this.form.date) {
        this.$message({
          message: '未选择日期',
          type: 'error'
        })
        return;
      }
      this.formLoading = true
      let data = {
        date: this.formattedDate(this.form.date)
      }
      removeInout(data).then(res => {
        this.formLoading = false
        this.form.date = ''
        this.$message({
          message: '操作成功',
          type: 'success'
        })
      }).catch(() => {
        this.formLoading = false
        this.form.date = ''
      })
    },
    removeTask() {
      if (!this.form.date) {
        this.$message({
          message: '未选择日期',
          type: 'error'
        })
        return;
      }
      this.formLoading = true
      let data = {
        date: this.formattedDate(this.form.date)
      }
      removeTask(data).then(res => {
        this.formLoading = false
        this.form.date = ''
        this.$message({
          message: '操作成功',
          type: 'success'
        })
      }).catch(() => {
        this.formLoading = false
        this.form.date = ''
      })
    }
  }
}
</script>
<style scoped lang='scss'>
@import '~@/styles/_handle.scss';

.container {
  height: 100%;
  padding: 24px 30px;

  .app-container {
    width: 100%;
    height: 100%;
    padding: 25px;
    border: 1px solid;
    @include border_image('container_border');
    @include background('content_bg_color');

    .a-box {
      background-color: #FFFFFF;
      height: 100%;
      padding: 20px;
      border-radius: 10px;
    }

    ::v-deep .el-tabs {
      height: 100%;
    }
  }
}
</style>
